<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个页面</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/base.css">
    <link rel="stylesheet" href="./CSS/page.css">
    <link rel="stylesheet" href="./CSS/common.css">
    <link rel="stylesheet" href="./CSS/widget.css">
    <link rel="stylesheet" href="./CSS/cart.css">

    <!-- <link rel="stylesheet" href="./动画.js"> -->
    <!-- <script>
        window.onload = function() {
            var imgList = document.getElementById('imgList');
            // 获取页面所有的img标签
            var imgArr = document.getElementsByTagName('img');
            imgList.style.width = 998 * imgArr.length + 'px';
            var navDiv = document.getElementById('navDiv');
            var pointBtn = document.getElementById('pointBtn');
            navDiv.style.left = (sliderDdiv.offsetWidth - navDiv.offsetWidth) / 2 + 'px';
            // 默认图片索引
            var index = 0;
            // 获取所有的a
            var allA = document.getElementsByTagName("a");
            allA[index].style.backgroundColor = "skyBlue";

            var timer;
            // 为所有的超链接绑定单击响应函数
            for (var i = 0; i < imgArr.length; i++) {
                allA[i].num = i;
                clearInterval(timer);
                // 为超链接绑定单击响应函数
                allA[i].onclick = function() {
                    index = this.num;
                    setA();
                }
            }

            // 创建一个方法设置选中的a
            function setA() {
                if (index >= imgArr.length - 1) {
                    index = 0;
                    imgList.style.left = 0;
                }

                for (var i = 0; i < allA.length; i++) {
                    allA[i].style.backgroundColor = "";
                }

                // 设置选中的a
                allA[index].style.backgroundColor = "skyblue";
            }

        }
    </script> -->
</head>

<body>
    <div class="header">

        <!-- logo -->
        <div class="logDiv">
            <img src="./images/logo.png" alt="">
        </div>

        <!-- 顶部导航条 -->
        <div class="topMenu">
            <label for=" " class="cityName">河南</label>
            <ul>
                <li>
                    <p>你好，请登录</p>
                </li>
                <em></em>
                <li class="red">
                    <p>免费注册</p>
                </li>
                <em></em>
                <li>
                    <p>我的订单</p>
                </li>
                <em></em>
                <li>
                    <p>我的京东</p>
                </li>
                <em></em>
                <li>
                    <p>京东食品</p>
                </li>
                <em></em>
            </ul>
        </div>

        <!-- 搜索框 -->
        <div class="searchWarp">
            <input type="text" class="headerSearch" value="我抢尼玛的零元购">
            <input type="button" class="searchBtn">
            <div class="myShopDiv"><i class="shopNum"></i>
                <a class="a1" href="./HTML/cart.html">我的购物车</a>
            </div>
        </div>

        <!-- 栏目导航条 -->
        <div class="columDiv">
            <ul>
                <li><a href="./HTML/秒杀.html">秒杀</a></li>
                <li><a href="./HTML/优惠券.html">优惠券</a></li>
                <em></em>
                <li><a href="./HTML/闪购.html">闪购</a></li>
                <li><a href="./HTML/拍卖.html">拍卖</a></li>
                <li><a href="#">服装城</a></li>
                <em></em>
                <li class="pr">
                    <a href="#">京东超市</a>
                    <i style="top: -10px; right: -10px;" class="hot pa"></i>
                </li>
                <li><a href="#">生鲜</a></li>
                <li><a href="#">全球购</a></li>
                <li><a href="#">京东金融</a></li>
            </ul>
        </div>

    </div>

    <!-- mainID -->
    <div id="mainID">
        <div id="productNav">
            <ul>
                <li>
                    <p>手机</p>
                    <div class="popup">111</div>
                </li>
                <li>
                    <p>家电</p>
                    <div class="popup">222</div>
                </li>
                <li>
                    <p>电脑</p>
                    <div class="popup">333</div>
                </li>
            </ul>
        </div>

        <!-- 轮播图 -->
        <div id="sliderDdiv">
            <label for=""><</label>
            <a href="./HTML/product.html" value>
                <ul id="imgList">
                    <li><img src="./images/Slider/0.jpg" alt=""></li>
                    <li><img src="./images/Slider/1.jpg" alt=""></li>
                    <li><img src="./images/Slider/2.jpg" alt=""></li>
                    <li><img src="./images/Slider/3.jpg" alt=""></li>
                    <li><img src="./images/Slider/4.jpg" alt=""></li>
                    <li><img src="./images/Slider/5.jpg" alt=""></li>
                </ul>
            </a>
            <span>></span>
            <div id="pointBtn">
                <ul>
                    <li class="bgsky">
                        <a href="JavaScript:;"></a>
                    </li>
                    <li>
                        <a href="JavaScript:;"></a>
                    </li>
                    <li>
                        <a href="JavaScript:;"></a>
                    </li>
                    <li>
                        <a href="JavaScript:;"></a>
                    </li>
                    <li>
                        <a href="JavaScript:;"></a>
                    </li>
                    <li>
                        <a href="JavaScript:;"></a>
                    </li>
                </ul>
            </div>
            <div class="pointBtnBg"></div>
        </div>

        <!-- 两个广告位 -->
        <div class="adDiv mT10">
            <ul>
                <img src="./images/Slider/2.jpg" alt="">
                <img src="./images/Slider/5.jpg" alt="">
            </ul>
        </div>
    </div>

    <!-- productListTitle -->
    <div id="productListTitle">
        <p>来呀！快活呀</p>
    </div>

    <!-- 产品列表容器 -->
    <div class="productList">
        <div class="fl prodocuBlock productBg_1 mR10">
            <a href="./HTML/product.html">
                <dl class="bg_1">
                    <dt>电商超市</dt>
                    <dd>大打折扣,来肝</dd>
                </dl>
            </a>


        </div>

        <div class="fl prodocuBlock productBg_2 mR10">
            <a href="./HTML/product.html">
                <dl class="bg_2">
                    <dt>智能生活</dt>
                    <dd>引领智能新风尚</dd>
                </dl>
            </a>
        </div>

        <div class="fr prodocuBlock productBg_3 mR10">
            <a href="./HTML/product.html">
                <dl class="bg_3">
                    <dt>奢侈大牌</dt>
                    <dd>奢侈尼玛的大牌</dd>
                </dl>
            </a>
        </div>
    </div>

    <!-- 产品列表容器 -->

</body>

</html>